<template>
  <el-card header="年检校对">
    <div class="tree-box">
      <MForm :fields="fields" :modelValue="modelValue" @submit="search" @cancel="search">
        <template #extra>
          <el-button type="primary" @click="exportHtmlToWord">导出</el-button>
        </template>
      </MForm>
      <el-table :data="tableData" border style="width: 100%" height="600">
        <el-table-column type="selection" width="50" />
        <el-table-column label="组织名称" prop="organizationBaseName" :show-overflow-tooltip="true" width="300">
          <template v-slot="scope">
            <div style="height: 28px; line-height: 28px">
              <span>名称：{{ scope.row.organizationBaseName }}</span>
            </div>
            <div style="height: 28px; line-height: 28px">
              <span>编码：{{ scope.row.creditCode }}</span>
            </div>
          </template>
        </el-table-column>

        <!-- <el-table-column label="年检年份" prop="examineYear" :show-overflow-tooltip="true" width="120" align="center" /> -->
        <el-table-column label="业务主管单位" prop="supervisoryUnit" :show-overflow-tooltip="true"
          align="center" />
        <el-table-column label="法定代表人/负责人" prop="legalRepresentativeName" :show-overflow-tooltip="true" width="160"
          align="center" />
        <el-table-column label="组织类别" prop="organizationType" width="120" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.organizationType == 1 ? 'warning' : ''">
              <span class="tag">{{
                scope.row.organizationType == 1 ? '社团' : '民非'
              }}</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核进度"  header-align="center" width="500">
          <template #default="scope">
            <div style="display: flex; align-items: center;">
              <div style=" display: flex; align-items: center">
                <template v-for="item in scope.row.approveList">
                  <span :class="['check-step', { 'no-check': item.approveStatus == 0 }]">{{
                    item.approveDescription }}</span>
                  <el-icon>
                    <Right />
                  </el-icon>
                </template>
              </div>
              <el-button size="mini" type="text" @click="handleWatch(scope.row)" style="margin-left: 10px">详情
              </el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="申请时间" prop="createdTs" :show-overflow-tooltip="true" width="180" align="center" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
          <template #default="scope">
            <div v-if="scope.row.approveLevel < 2">
              <el-button type="text" :icon="View" @click="handleCheck(scope.row)">校对数据</el-button>
              <el-button type="text" :icon="Stamp" @click="checkToJDResult(scope.row)">检查</el-button>
              <el-button type="text" :icon="Download" @click="checkToExcel(scope.row)">导出检查</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageInfo-box">
        <el-pagination v-model:current-page="params.pageNum" :page-sizes="[100, 200, 300, 400]" background
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-card>
  <el-dialog v-model="dialogCheckVisible" title="年检审核" width="95%" top="3vh" draggable destroy-on-close>
    <checkST v-if="isSt" @openResult="checkSubmit" :currentRow="chooseRow">
    </checkST>
    <checkMF v-else @openResult="checkSubmit" :currentRow="chooseRow">
    </checkMF>
  </el-dialog>
  <!-- 分配组织数据权限对话框 -->
  <el-dialog title="审核进度" v-model="openPress" width="600px" append-to-body draggable destroy-on-close top="5vh">
    <checkStep :currentRow="chooseRow"></checkStep>
  </el-dialog>
  <el-dialog title="校对批注" v-model="dialogResultVisible" width="700px" top="4vh" append-to-body draggable
    destroy-on-close>
    <NoteList :currentRow="chooseRow"> </NoteList>
  </el-dialog>
  <el-dialog title="校对结果" v-model="dialogJDResultVisible" width="1000px" top="4vh" append-to-body draggable
    destroy-on-close>
    <el-table border :data="jDTableData" stripe style="width: 100%">
      <el-table-column type="index" width="100" align="center"></el-table-column>
      <el-table-column prop="pageNumber" label="页码" width="280" />
      <el-table-column prop="description" label="描述" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, provide } from 'vue'
import { fields, modelValue } from './config'
import { getFcOrgList, toJD, toJDExcel } from '@/api/yearCheck/index'
import { Right, Stamp, Download, View } from '@element-plus/icons-vue'

import checkST from './components/checkST/checkST.vue'
import checkMF from './components/checkMF/checkMF.vue'
import checkStep from './components/checkStep.vue'
import NoteList from './components/noteList.vue'
import { ElLoading } from 'element-plus'

const tableData = ref([])
const jDTableData = ref([])
const total = ref()
const checkForm = ref({
  proofreadStatus: '1',
  id: '1'
})

// 搜索
const params = ref<any>({
  pageSize: 10,
  pageNum: 1,
})
const dialogCheckVisible = ref(false) //审核
const openPress = ref(false) //查看审核进度
const dialogResultVisible = ref(false) //审核结果
const dialogJDResultVisible = ref(false) //校对结果

const isSt = ref(false) //
let chooseRow = ref({}) //

const search = (data: any) => {
  params.value = {
    ...params.value,
    ...data
  }
  getFcOrgList(params.value).then(res => {
    const { data } = res
    tableData.value = data
    total.value = res.total
    console.log(res.data)
  })
}
search(modelValue)

//导出
const exportHtmlToWord = () => {

}
const handleCheck = (row) => {
  isSt.value = row.organizationType == 1 ? true : false;
  chooseRow.value = Object.assign({}, row)
  dialogCheckVisible.value = true
}
const handleWatch = (row) => {
  chooseRow.value = row
  openPress.value = true
}
const checkSubmit = () => {
  // OrgId = chooseRow.id
  dialogResultVisible.value = true

}
const closeAllPop = () => {
  dialogResultVisible.value = false
  dialogCheckVisible.value = false
  search(modelValue)
}
// const closeAllPop = () => {
//   dialogJDResultVisible.value = false
//   search(modelValue)
// }
//检查，结果导出excel
const checkToExcel = (row) => {
  const loading = ElLoading.service({
    lock: true,
    text: '检查校对中...',
    background: 'rgba(0, 0, 0, 0.2)'
  })
  toJDExcel({ id: row.id }).then(res => {
    const blob = new Blob([res], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    })
    const a = document.createElement('a')
    const URL = window.URL || window.webkitURL
    const herf = URL.createObjectURL(blob)
    a.href = herf
    a.download = '检查结果.xlsx'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    window.URL.revokeObjectURL(herf)
    loading.close()
  })
}

const checkToJDResult = (row) => {
  dialogJDResultVisible.value = true
  toJD({ id: row.id }).then(res => {
    jDTableData.value = res.data
  })
}

// 提供方法给子组件
provide('closeAllPop', { closeAllPop });

const handleCurrentChange = (value) => {
  search(modelValue)
}
</script>
<style lang="scss" scoped>
.tree-box {
  position: relative;

  .nodeBox {
    width: 100%;
    height: 80vh;
    overflow-x: auto;
    cursor: all-scroll;
  }

  .showLevel {
    position: absolute;
    right: 0;
    top: 0;
  }
}

.dialog-row {
  width: 100%;

  .dialog-col {
    width: 100%;
    display: flex;

    .dialog-col-serialNumber {
      color: #333;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      font-weight: bold;
      margin-right: 20px;
    }

    .dialog-col-rig {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid rgba(237, 237, 237, 1);
      margin-bottom: 20px;
      padding-bottom: 20px;

      .dialog-col-rig-content {
        .dialog-col-rig-content-title {
          font-size: 13px;
          color: #666;
          margin-bottom: 20px;
        }

        .dialog-col-rig-content-form {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
}

.btns {
  display: flex;
  flex-direction: row-reverse;
}

.ml-20 {
  margin-left: 20px;
}

.ml-12 {
  margin-left: 12px;
}

.pageInfo-box {
  display: flex;
  justify-content: right;
  padding-top: 30px;
}

.check-step {
  color: #0fbb21;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  &.no-check {
    color: #909399
  }
}
</style>
